<template>
    <div align="center">
        <love-panel
                position="top"
                random_color="false"
                :mid_text="info.thumb"
                :right_text="info.ranks"
                :left_text="info.view">
        </love-panel>
        <declaimer-items class="me-item"
                         :work_content="info.work_content"
                         :title="info.title"
                         text_center="center"
                         :color="itemTheme"
                         v-on:dItemClick="toDetailPage()">
        </declaimer-items>
        <float-button value="add"
                      bg_color="black"
                      small
                      @floatButtonClick="floatButtonClick">
        </float-button>
    </div>
</template>

<script>
    import FloatButton from "@/components/FloatButton.vue"
    import LovePanel from "@/components/LovePanel"
    import DeclaimerItems from '@/components/DeclaimerItem'

    export default {
        name: "Me",
        components: {
            FloatButton,
            LovePanel,
            DeclaimerItems
        },
        data() {
            return {
                itemTheme: this.$store.state.uiState.top_bar,
                info: {
                    id: 1,
                    title: '我的作品',
                    src: null,
                    work_content: "你还没有过提交作品，点击 + 提交你的声音吧！Join us.",
                    duration: null,
                    status: null,
                    thumb: null,
                    upload: null,
                    view: null,
                    artist: null,
                    ranks: null,
                    theme: '',
                    current: 0,
                    pic: ''
                }
            }
        },
        created() {
            this.$store.commit('updateTopTile', '我')
            this.$store.commit('updateBackTo', '/declaimer/me')
            this.getMe()
        },
        methods: {
            toDetailPage() {
                if (this.info != null && this.info.src != null) {
                    this.$store.commit('selectVoice', this.info)
                    this.$router.push('/declaimer/voiceDetail/' + this.info.id)
                    this.$store.commit('updateBackendPlay', false)
                }
            },
            floatButtonClick() {
                this.$router.push('/declaimer/addWork')
                this.$store.commit('updateBackendPlay', false)
            },
            getMe() {
                this.$store.dispatch('getSelfWorks').then(res => {
                    if (res.data.code === 0) {
                        this.info = this.$musicFormat(res.data.data)
                    }
                })
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .me-item
        position relative
        top: 33vh
        padding 8px
        width 85%

</style>